


$(document).ready(function() {
	linkEvents();
});



function linkEvents() {
	
	// when the user click the link with the name of the offer
	$('.offerName').click(function(event) {
		event.preventDefault();
		offerId = $(this).attr('data-offerId');
		userId 	= $(this).attr('data-userId');
		getOfferInfo(offerId, userId);
	});

	// when user click the link with the number of classes available
	$('.classes').click(function(event) {
		event.preventDefault();
		data = {};
		data.offerId 	= $(this).attr('data-offerId');
		data.classId 	= $(this).attr('data-classId');
		data.userId 	= $(this).attr('data-userId');
		getSchedules(data);
	});
	
	// tmp button action 
	$('#tmpAction').click(function(event) {
		console.log('action');
	});
}




//get future schedules associated to the offer
function getSchedules(data) {
	
	$.getJSON(window.ajaxUrl + "/readScheduleAction",
		{
			data: 		data
		},
		function(schedules){
			popUpCalendar(schedules);
		}
	);
}



// get information about the offer
function getOfferInfo(offerId,userId) {
	
	$.getJSON(window.ajaxUrl + "/readOfferAction",
		{
			offerId:	offerId,
			userId:		userId
		},
		function(offer){
			popUpOfferInfo(offer);	
			//console.log(offer,'offer');
		}
	);
}





// calendar with schedules (for now is just a table)
function popUpCalendar(schedules) {

	var popUpCalendarDialog = $('#popUpCalendarDialog');

	popUpCalendarDialog.attr('title','Aulas');

	// remove all elements inside this id
	popUpCalendarDialog.empty();

	// dialog properties
	var properties = {
		width:		480,
		height:		400,
		show: 		'fade',
		hide: 		'fade',
		buttons: {
			"Ok": 		
			function() {
				$(this).dialog("close");
			}
		}
	};
	
	// iterate through all schedules 
	$.each(schedules, function(key, value) {
		var cal_container = '<div class="cal-container"><div class="cal-class-label inside-cal-container"><p>Aula '+ (key+1) + ':</p></div> <div class="cal-data-container inside-cal-container"><div class="cal-date-label"><p>Inicio:</p></div><div class="cal-date"><p>' + schedules[key].start +'</p></div><div class="cal-date-label"><p>Fim:</p></div><div class="cal-date"><p>' + schedules[key].end + '</div></p></div></div>';
		$(cal_container).appendTo('#popUpCalendarDialog');
	});

	// show dialog
	popUpCalendarDialog.dialog(properties); 
}





function popUpOfferInfo(offer) {
	
	$('#offerInfoDialog').attr('title',offer[0].offerName);
	var offerInfoContainer 	= $('#offerInfoContainer');
	offerInfoContainer.find('.price p').text(offer[0].offerPrice);
	offerInfoContainer.find('.level p').text(offer[0].offerLevel);
	offerInfoContainer.find('.description p').text(offer[0].offerDescription);

	//console.log(offer[0].offerDescription);
	// add offer data (using jquery chaining feacture)
	//$('#offerInfoContainer')
		//.find('.price p').text(offer[0].offerPrice)
		//.find('.level p').text(offer[0].offerLevel)
		//.find('.description p').text(offer[0].offerDescription);
	
	var properties = {
		width:		500,
		height:		400,
		show: 		'fade',
		hide: 		'fade',
		buttons: {
			"Ok": 		
			function() {
				$(this).dialog("close");
			}
		}
	};
	
	$('#offerInfoDialog').dialog(properties); 
}	